<template>
  <scroll-view scroll-y="true"  :style="styleField"  @scrolltolower="lower">
    <slot :list="list"></slot>
    <image v-if="firstRequest" src="/static/img/no_data.jpg" class="no-data"></image>
    <transition name="loading">
      <view v-show="loading" :class="loadType?'tip':'tip tip-more'">
				 <u-loading class="u-loadmore-icon" color="#b7b7b7"
          mode="circle" :show="loadType"></u-loading>
        <view class="loading-text">{{loadType?'加载中...':'没有更多了'}}</view>
      </view>
    </transition>
  </scroll-view>
</template>

<script>
import ListRequest from '@/mixins/list_request'

export default {
  name: "index",
  mixins: [ListRequest],
  props: {
    styleField: {
      type: Object,
      default: () => ({height: '100%', width: '100%'})
    },
    requestName: {
      type: String,
      require: true
    },
    params:{
      type:Object,
      default:()=>({})
    }
  }
}
</script>

<style lang="scss" scoped>
.loading-enter-active, .loading-leave-active {
  transition: all .5s;
}
.loading-enter, .loading-leave-to  {
  transform: translateY(10px);
  opacity: 0;
}
.tip{
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.4);
		line-height: 34rpx;
		text-align: center;
		margin-bottom:34rpx;
		margin-top: 22rpx;
    display: flex;
  justify-content: center;
    .loading-text{
      margin-left:20rpx;
    }
	}
.tip-more::before{
			content:"";
			display: inline-block;
			width: 26rpx;
			height: 22rpx;
			background:url(../../static/img/zhiyfw_more.png) no-repeat center;
			background-size: 26rpx auto;
			margin-right:20rpx;

}
.no-data{
  width: 514rpx;
  height: 288rpx;
  display: block;
  margin:auto;
}
</style>
